<!-- 修改用户信息 -->
<template>
    <dy-dialog :title="title" ref="dialog" @submitHandle="submitHandle" :loading="loading">
        <el-form :label-position="labelPosition" label-width="100px" :model="form" ref="ruleFormRef" :rules="rules"
            style="max-width: 460px">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="form.username" disabled />
            </el-form-item>
            <el-form-item label="工号" prop="user_id">
                <el-input v-model="form.user_id" disabled />
            </el-form-item>
            <el-form-item label="真实姓名" required prop="real_name">
                <el-input v-model="form.real_name" clearable />
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="form.mobile" clearable />
            </el-form-item>
            <el-form-item label="邮箱" required prop="email">
                <el-input v-model="form.email" clearable />
            </el-form-item>
        </el-form>
    </dy-dialog>
</template>

<script setup>
import { reactive, toRefs, ref } from 'vue'
import { ElMessage } from 'element-plus'

let emits = defineEmits(['getTable'])

let state = reactive({
    title: '',
    labelPosition: 'left',
    userInfo: null,
    loading: false,
    form: {}
})
//数据
let { title, labelPosition, form, loading } = toRefs(state)

//弹框实例
let dialog = ref(null)
//form实例
const ruleFormRef = ref(null)

//表单验证规则
const rules = reactive({
    real_name: [
        { required: true, message: '请输入真实姓名', trigger: 'blur' }
    ],
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }
    ],
    email: [
        { required: true, message: '请输入邮箱', trigger: 'blur' }
    ]
})

//打开弹框执行
let openFunction = (params) => {
    state.title = params.title
    state.userInfo = JSON.parse(JSON.stringify(params.userInfo))
    state.form = {
        username: state.userInfo.username,
        user_id: state.userInfo.user_id,
        real_name: state.userInfo.real_name,
        mobile: state.userInfo.mobile,
        email: state.userInfo.email
    }
}

//提交
let submitHandle = () => {
    ruleFormRef.value.validate(async (valid) => {
        if (!valid) {
            return false
        }
        let params = {
            id: state.userInfo.id,
            real_name: state.form.real_name,
            mobile: state.form.mobile,
            email: state.form.email
        }
        state.loading = true
        let res = await api.changeaxiosdata('users', 'patch', params)
        if (res) {
            ElMessage({
                message: '修改成功!',
                type: 'success'
            })
            emits('getTable')
            dialog.value.handleClose()
        }
        state.loading = false
    })
}

defineExpose({ openFunction })
</script>

<style lang="scss" scoped></style>